	page {
		background-color: #fff;

		.user-vip {
			.header {
				background: linear-gradient( 270deg, #FF6010 0%, #FFB443 100%);
				padding-top: 30rpx;
				background-size: 100% 100%;
				height: 382rpx;

				.user-vip-info {
					padding-left: 30rpx;

					.user-level {
						border: 1px solid white;
						border-radius: 100rpx;
						padding: 4rpx 20rpx;
						line-height: 30rpx;
					}

					.user-text {
						line-height: 50rpx;
						font-weight: bold;
					}
				}
			}

			.content {
				margin-top: -210rpx;
				.swiper-item{
					height: 340rpx;
					padding-top: 20rpx;
					
				}
				.vip-card-item {
					height: 320rpx;
					width: 600rpx;
					padding-top: 80rpx;
					position: relative;
					background-size: 100% 100%;
					
					.top-bar{
						.status{
							height: 52rpx;
							display: flex;
							align-items: center;
							position: absolute;
							top: 0;
							left: 0;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 24rpx;
							padding: 0 20rpx;
						}
					}

					.grade {
						line-height: 36rpx;
						background-color: rgba(0, 0, 0, 0.5);
						border-top-right-radius: 100rpx;
						border-bottom-right-radius: 100rpx;
						height: 50rpx;
						padding: 0 28rpx;
					}

					.user-grade {
						line-height: 36rpx;
						margin-left: 30rpx;
					}

					.grade-icon {
						width: auto;
						height: 200rpx;
						position: absolute;
						top: -20rpx;
						right: 0;
					}

					.vip-name {
						padding: 10rpx 30rpx;
						font-weight: 400;
						font-size: 44rpx;
						text-align: center;
						align-items: flex-end;
						// margin-top: 80rpx;
					}
					
					.num-box{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #485570;
						line-height: 32rpx;
						padding-left: 30rpx;
						margin-top: 20rpx;
						.big{
							font-weight: 600;
							font-size: 32rpx;
						}
					}
					
					.footer-box{
						display: flex;
						justify-content: space-between;
						padding: 0 20rpx 0 30rpx;
						
						.desc{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #485570;
							line-height: 24rpx;
							margin-top: 10rpx;
							.val{
								color: #FF6211;
							}
						}
						
						.btn{
							width: 220rpx;
							height: 72rpx;
							background: linear-gradient( 277deg, #FFDFB9 0%, #EBE2CF 47%, #FCF9EE 100%);
							border-radius: 120rpx 120rpx 120rpx 120rpx;
							border: 1rpx solid #FFFFFF;
							font-family: PingFang SC, PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
							color: #8D6F4C;
							line-height: 32rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}

					.vip-progress {
						height: 8rpx;
						width: 300rpx;
						margin-top: 20rpx;
						border-radius: 4rpx;
						overflow: hidden;

						.vip-progress-bar {
							background-color: #f8d07c;
							height: 100%;
						}
					}

				}

				.vip-grade-rule {
					margin: 24rpx 40rpx;

					.title {
						.line {
							width: 8rpx;
							height: 34rpx;
							background-color: #f79c0c;
						}
					}
				}

				.vip-rights {
					margin: 24rpx 40rpx;

					.title {
						padding: 28rpx 0;

						.line {
							width: 8rpx;
							height: 34rpx;
							background-color: #f79c0c;
						}
					}

					.rights-item {
						width: 25%;
						padding-bottom: 30rpx;

						image {
							width: 82rpx;
							height: 82rpx;
						}
					}
				}

			}

		}
	}
	
	
	.select-vip-level-contain{
		.main-container{
			.title{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: center;
				padding: 30rpx 0;
				
			}
			.item-list{
				width: 100vw;
				padding: 30rpx 20rpx 50rpx;
				box-sizing: border-box;
				
			.item-wrap{
				display: flex;
				.item{
					flex-shrink: 0;
					width: 228rpx;
					height: 320rpx;
					border-radius: 20rpx;
					border: 2rpx solid;
					border-color: #F2F5F7;
					margin-right: 25rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					overflow: hidden;
					
					background: #F2F5F7;
					.item-main{
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding-top: 40rpx;
						.item-title{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							line-height: 28rpx;
							margin-bottom: 30rpx;
						}
						.line-through{
							margin-top: 10rpx;
						}
					}
					.item-footer{
						width: 100%;
						height: 72rpx;
						background: #E8ECEF;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.text{
							font-size: 20rpx;
							color: #999;
						}
						.date{
							font-size: 24rpx;
							color: #999;
						}
					}
				}
				.item:not(:last-child){
					margin-right: 28rpx;
				}
				
				.active{
					background: linear-gradient( 180deg, #FBE9B4 0%, #FFF9E8 100%);
					border-color: #000000;
					.item-main{
						.item-title{
							color: #9C8A64;
						}
					}
					.item-footer{
						background: #FCEAB7;
						.text, .date{
							color: #504632;
						}
					}
				}
			}
			
				
			}
		}
		.footer-container{
			width: 100%;
			display: flex;
			justify-content: center;
			box-shadow: inset 0rpx 1rpx 0rpx 0rpx #E5E5E5;
			padding-top: 40rpx;
			.btn{
				width: 710rpx;
				height: 96rpx;
				background: linear-gradient( 116deg, #FCEBBA 0%, #F9DB81 100%);
				border-radius: 160rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #795021;
				line-height: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}